//width,height
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

//flex
.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

$flex-jc: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
);

$flex-ai: (
    start: flex-start,
    end: flex-end,
    center: center,
    stretch: stretch,
);

.flex-wrap {
    flex-wrap: wrap;
}

.flex-grow-1 {
    flex-grow: 1;
}

//justify-content
@each $key, $value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}

//align-items
@each $key, $value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
}
